<template>
  <div class="app">
    
    <Category title="热门游戏列表">
      <template slot="s1">
        <ul>
          <li v-for="g in games" :key="g.id">{{g.name}}</li>
        </ul>
      </template>
      <template  slot="s2">
        <a href="#">点我查看更多游戏</a>
      </template>
      <template slot="default">
        <p>哈哈</p>
      </template>
    </Category>

    <Category title="今日美食城市">
      <template slot="s1">
        <img :src="food" alt="">
      </template>
      <template  slot="s2">
        <a href="#">点我查看更多美食</a>
      </template>
    </Category>

    <Category title="今日影视推荐">
      <template slot="s1">
        <video :src="movie"></video>
      </template>
      <template  slot="s2">
        <a href="#">点我查看更多影视</a>
      </template>
    </Category>
  </div>
</template>

<script>
  import Category from './components/Category.vue'
  export default {
    name:'App',
    components:{Category},
    data() {
      return {
        games:[
          {id:'asdtrd1',name:'英雄联盟'},
          {id:'asdtrd2',name:'原神'},
          {id:'asdtrd3',name:'红色警戒'},
          {id:'asdtrd4',name:'斗罗大陆'}
        ],
        food:'http://49.232.112.44/images/food.jpg',
        movie:'http://49.232.112.44/video/movie.mp4'
      }
    },
  }
</script>

<style> 
  .app {
    background-color: gray;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px black;
    display: flex;
    justify-content: space-evenly
  }
</style>